(function()
{
   /**
    * YUI Library aliases
    */
   var Dom = YAHOO.util.Dom,
       Event = YAHOO.util.Event;

   /**
    * Alfresco Slingshot aliases
    */
   var $html = Alfresco.util.encodeHTML;
   
   /**
    * UserDataTable constructor.
    * 
    * @param {String} htmlId The HTML id of the parent element
    * @param {String} currentValueHtmlId The HTML id of the parent element
    * @return {Alfresco.UserDataTable} The new UserDataTable instance
    * @constructor
    */
   Alfresco.UserDataTable = function Alfresco_UserDataTable(htmlId, currentValueHtmlId)
   {
      Alfresco.UserDataTable.superclass.constructor.call(this, "Alfresco.UserDataTable", htmlId, ["button", "container", "datasource", "datatable"]);
      this.currentValueHtmlId = currentValueHtmlId;
      
      return this;
   };
   
   YAHOO.extend(Alfresco.UserDataTable, Alfresco.component.Base,
   {
      /**
       * Object container for initialization options
       *
       * @property options
       * @type object
       */
      options: {},
      
      /**
       * Fired by YUILoaderHelper when required component script files have
       * been loaded into the browser.
       *
       * @method onComponentsLoaded
       */
      onComponentsLoaded: function UserDataTable_onComponentsLoaded()
      {
         if (this.id !== "null")
         {
        	 Event.onContentReady(this.id, this.onReady, this, true);
        	 //this.onReady();
         }
      },
      
      /**
       * Fired by YUI when parent element is available for scripting.
       * Component initialisation, including instantiation of YUI widgets and event listener binding.
       *
       * @method onReady
       */
      onReady: function UserDataTable_onReady()
      {
          // Variables DataTable
          // columns
          var variablesColumnDefs =
          [
              { key: "user", label: this.msg("form.control.details.column.userColumnHeader"), sortable: false, formatter: this.bind(this.renderCellUser), width: 100 },
              { key: "data1", label: this.msg("form.control.details.column.data1ColumnHeader"), sortable: false, formatter: this.bind(this.renderCellData1), width: 100 },
              { key: "data2", label: this.msg("form.control.details.column.data2ColumnHeader"), sortable: false, formatter: this.bind(this.renderCellData2), width: 100 },
              { key: "data3", label: this.msg("form.control.details.column.data3ColumnHeader"), sortable: false, formatter: this.bind(this.renderCellData3), width: 100 }              
          ];
          
          // datasource
          var fieldValue = Dom.get(this.currentValueHtmlId).value;
          
          
          //variables: json string dtata
          var variablesArray = [];
          if (fieldValue != null && fieldValue != "") {
        	  variablesArray = YAHOO.lang.JSON.parse(fieldValue);
          }
          //FieldValue: array
          this.widgets.variablesDataSource = new YAHOO.util.DataSource(variablesArray);
          this.widgets.variablesDataSource.responseType = YAHOO.util.DataSource.TYPE_ARRAY;
    	  this.widgets.variablesDataSource.responseSchema = {
	        	resultsList: "details",
	        	fields: ["user", "data1", "data2", "data3"]
    	  };
    	  
    	  // table
    	  this.widgets.variablesDataTable = new YAHOO.widget.DataTable(this.id + "-details", 
    			  variablesColumnDefs, this.widgets.variablesDataSource, {caption:this.msg("form.control.details.title")});
    	  // MSG
    	  this.widgets.variablesDataTable.set("MSG_EMPTY", this.msg("form.control.details.message.noDetails"));
    	  this.widgets.variablesDataTable.set("MSG_ERROR", this.msg("form.control.details.message.detailsError"));
    	  
    	  // render the table              
          this.widgets.variablesDataTable.render();
      },
      
      /**
       * DataTable Cell Renderers
       */
      
      /**
       * Render variable user
       *
       * @method renderCellUser
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      renderCellUser: function UserDataTable_renderCellUser(elCell, oRecord, oColumn, oData)
      {
         var detail = oRecord.getData(),
         var user = detail.user;
         
         if(user !== null)
         {
        	elCell.innerHTML = $html(user);
         }
         else
         {
            elCell.innerHTML = this.msg("form.control.details.label.none");
         }
      },
      
      /**
       * Render variable data1
       *
       * @method renderCellData1
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      renderCellData1: function UserDataTable_renderCellData1(elCell, oRecord, oColumn, oData)
      {
         var detail = oRecord.getData(),
         var data1 = detail.data1;
         
         if(data1 !== null)
         {
             elCell.innerHTML = $html(data1);
         }
         else
         {
            elCell.innerHTML = this.msg("form.control.details.label.none");
         }
      },
      
      /**
       * Render variable data2
       *
       * @method renderCellData2
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      renderCellData2: function UserDataTable_renderCellData2(elCell, oRecord, oColumn, oData)
      {
         var detail = oRecord.getData(),
         var data2 = detail.data2;
         
         if(data2 !== null)
         {
        	 elCell.innerHTML = $html(data2);
         }
         else
         {
            elCell.innerHTML = this.msg("form.control.details.label.none");
         }
      },
      
      /**
       * Render variable data3
       *
       * @method renderCellData3
       * @param elCell {object}
       * @param oRecord {object}
       * @param oColumn {object}
       * @param oData {object|string}
       */
      renderCellData3: function UserDataTable_renderCellData3(elCell, oRecord, oColumn, oData)
      {
         var detail = oRecord.getData(),
         var data3 = detail.data3;
         
         if(data3 !== null)
         {
        	elCell.innerHTML = $html(data3);
         }
         else
         {
            elCell.innerHTML = this.msg("form.control.details.label.none");
         }
      }      
   });
})();